<template>
    <div class="user">
        <div class="head">
            <div class="add">
                <el-button type="primary" @click="add()">新增</el-button>
            </div>
            <div class="search">
                <el-input placeholder="请输入姓名" v-model="keyword"></el-input>
                <el-button type="primary">搜索</el-button>
            </div>
        </div>
        <div class="body">
            <el-table
                :data="tableData"
                >
                <el-table-column
                    v-for="item in tablehead"
                    :key="item.prop"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width"
                    >
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        type="primary"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="10"
                layout="prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <!-- 对话框 -->
        <el-dialog
            :visible.sync="dialogVisible"
            width="45%"
            :title="dialogTitle"
            :before-close="cancel"
            >
            <CommonForm :formdata="formdata" :formtype="formtype"></CommonForm>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="define">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {getUsers,addUsers,updateUsers,delUsers} from '@/api/user'
import CommonForm from '@/components/CommonForm.vue'
export default {
    name:'User',
    components:{CommonForm},
    data(){
        return {
            total:0,
            currentPage:1,
            dialogVisible:false,
            dialogTitle:'新增用户',
            dialogtype:'',
            keyword:'',
            formtype:[
                {
                    label:'姓名',
                    prop:'name',
                    type:'input'
                },
                {
                    label:'年龄',
                    prop:'age',
                    type:'input'
                },
                {
                    label:'出生年月',
                    prop:'birth',
                    type:'datepicker'
                },
                {
                    label:'性别',
                    type:'select',
                    prop:'sex',
                    width:'160',
                    options:[
                        {
                            label:'男',
                            value:'男'
                        },
                        {
                            label:'女',
                            value:'女'
                        }
                    ]
                },
                {
                    label:'地址',
                    type:'input',
                    prop:'address',
                    width:'360'
                }
            ],
            formdata:{},
            tablehead:[
                {
                    prop:'name',
                    label:'姓名',
                    width:'180'
                },
                {
                    prop:'sex',
                    label:'性别',
                    width:'180'
                },
                {
                    prop:'age',
                    label:'年龄',
                    width:'180'
                },
                {
                    prop:'birth',
                    label:'出生年月',
                    width:'180'
                },
                {
                    prop:'address',
                    label:'住址',
                    width:'180'
                },
            ],
            tableData:[]
        }
    },
    methods:{
        // 新增用户
        add(){
            this.dialogTitle = '新增用户'
            this.dialogVisible = true,
            this.dialogtype = 'add'
        },
        // 取消
        cancel(){
            // 表单项清空
            this.formdata = {}
            this.dialogVisible = false
        },
        // 确定
        define(){
            // 发送请求
            if(this.dialogtype == 'add'){
                addUsers(this.formdata)
            }
            if(this.dialogtype == 'edit'){
                updateUsers(this.formdata)
            }
            // 表单项清空
            this.formdata = {}
            this.dialogVisible = false
            // 刷新页面
            this.fetchdata()
        },
        // 编辑
        handleEdit(index,row){
            this.dialogTitle = '编辑用户'
            this.formdata = row
            this.dialogVisible = true
            this.dialogtype = 'edit'
            // 刷新页面
            this.fetchdata()
        },
        // 删除
        handleDelete(index,row){
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 调用删除接口
                delUsers(row)
                this.fetchdata()
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        handleCurrentChange(val){
            this.currentPage = val;
            this.fetchdata()
        },
        fetchdata(){
            let obj = {
                pageSize:10,
                pageNum:this.currentPage
            }
            getUsers(obj).then((res) => {
                console.log(res.data)
                this.tableData = res.data.users
                this.total = res.data.total
            })
        },
    },
    mounted(){
        this.fetchdata()
    }
}
</script>

<style lang="less" scoped>
.user{
    .head{
        display: flex;
        justify-content: space-between;
        .search{
            display: flex;
            .el-button{
                margin-left: 10px;
            }
        }
    }
    .body{
        .el-pagination{
            float: right;
            margin: 22px;
        }
    }
}
</style>